<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作业1</title>
  <style>
  	* {
  		padding: 0;
  		margin: 0;
  	}
  	.box {
  		position: relative;
  		width: 500px;
  		height: 200px;
  		border: 1px solid skyblue;
  		border-radius: 50%;
  	}
  	.box1 {
  		position: absolute;
  		left: 50%;
  		width: 100px;
  		height: 100px;
  		border-radius: 50%;
  		background-color: skyblue;
  		transform: translate(-50%);
  	}
  	.box2 {
  		position: absolute;
  		left: 50%;
  		margin-left: -50px;
  		margin-top: 100px;
  		width: 100px;
  		height: 100px;
  		border-radius: 50%;
  		background-color: skyblue;
  	}
  </style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
  		<div class="box2"></div>
	</div>
</body>
</html>